<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body>div:first-child {
            border: 1px solid red;
            float: left;
            width: 100px;
            height: 100px;
        }
        #secondDiv {
            border: 1px solid green;
            float: left;
            width: 100px;
            height: 100px;
            margin-left: 100px;
        }
        #wrapped {
            background-color: #CCC;
        }  
    </style>
</head>
<body>
     <!-- 由于上个版本无法实现 多个元素 被拖拽到任何地方 
         所以得拓展-->
    
    <div id="firstDiv">
        <!-- 标签的属性draggable得true -->
        <p id="wrapped" draggable="true">被拖拽元素</p>
        <p id="wrapped2" draggable="true">被拖拽元素</p>
    </div>
    <div id="secondDiv">

    </div>
    <script>
        /*应用于拖拽元素的事件
            1.ondrag      整个拖拽过程都会调用 持续
            2.ondragleave 被拖拽元素完全离开原来位置时调用
            3.ondragstart 拖拽开始调用
            4.ondragend   拖拽结束时调用
        */
        // obj 用来存储被拖拽的元素
        // 但是全局变量 1不安全  2占内存
        // 用e.dataTransfer.setData();
        // var obj = null;
        document.ondrag=function(e){
            // 通过事件捕获来获取当前子元素
            console.log(e.target);
        }
        document.ondragleave=function(){
            
        }
        document.ondragstart=function(e){
            // obj = e.target;
            // e.dataTransfer.setData(format,data)
            // format:数据类型  text/html text/uri-list
            e.dataTransfer.setData("text/html",e.target.id);
        }
        document.ondragend=function(){
       
        }
        /*应用于目标元素的事件
            1.ondragenter     当拖拽元素进入时调用
            2.ondragover      当拖拽元素停留在目标元素上调用
            3.ondrop          当元素在目标元素上松开鼠标时使用
            4.ondragleave     当鼠标离开目标元素时调用
        */
        document.ondragenter = function(){
         
        }
        document.ondragover = function(e){
            // 如果想触发ondrop事件 那么久必须在这个位置阻止浏览器的默认行为
            e.preventDefault();
        }
        /*浏览器会默认住址ondrop事件  我们必须在ondragover中阻止浏览器的默认行为*/
        document.ondrop = function(e){
            // 只能在drop中获取
            var wrapped = document.querySelector("#"+e.dataTransfer.getData("text/html"));
            e.target.appendChild(wrapped);
        }
        document.ondragleave = function(){
            
        }
    </script>
</body>
</html>